<template>
     <div class="dowebok">
        <div class="container-login100">
            <div class="wrap-login100">
                <div class="login100-pic js-tilt" data-tilt>
                    <img :src="image" alt="IMG" />
                </div>

                <div class="login100-form validate-form">
                    <span class="login100-form-title"> 员工登陆 </span>

                    <div class="wrap-input100 validate-input">
                        <input class="input100" v-model="loginForm.email" type="text" name="email" placeholder="邮箱" />
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="iconfont icon-fa-envelope" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input">
                        <input class="input100" v-model="loginForm.password" type="password" name="password" placeholder="密码" />
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="iconfont icon-fa-lock" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn" @click="onSubmit">
                            登陆
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script  setup name="login">
import image from "@/assets/image/login.png";
import { reactive } from "vue";
import authHttp from "@/api/authHttp";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const authStore = useAuthStore();
const router = useRouter();

let loginForm = reactive({
    email: "",
    password: "",
});

const onSubmit = async () => {
    let pwdRgx = /^[0-9a-zA-Z_-]{6,20}/
    let emailRgx = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9])+/
    if(!pwdRgx.test(loginForm.password)||!emailRgx.test(loginForm.email)){
        ElMessage.info("邮箱或密码格式错误");
        return;
    }
    try{
        let data = await authHttp.login(loginForm.email, loginForm.password)
        let user = data.user
        let token = data.token
        authStore.setUserToken(user,token)
        router.push({name: "home"})
    }catch(detail){
        ElMessage.error(detail)
    }
    
   
};


</script>

<style scoped src="@/assets/css/login.css"></style>
<style scoped src="@/assets/iconfont/iconfont.css"></style>